<template>
  <el-menu :default-active="activeIndex" class="anchor" :active="navselected" @select="selectItems"  theme="dark">
    <el-menu-item v-for="item in idparams" style="line-height:40px;" :ref="elMenu+item.index" :id="'elMenu'+item.index" :key="item.id" @click="getAnchor(item.index,item.id)">{{item.name}}</el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: "PositionAnchor",
  props: {
    idparams: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      idparams: this.idparams,
      activeIndex: "none"
    };
  },
  methods: {
    getAnchor(index,id) {
      document.getElementById(id).scrollIntoView({behavior: "smooth"}); //跳转到锚点   
      // 设置选中项样式
      var array=this.idparams
      var length=array.length
      for(var i=0;i<length;i++){
        if(array[i].index==index){
           document.getElementById('elMenu'+i).style.backgroundColor='#aaaeee'
           document.getElementById('elMenu'+i).style.color='#E70020'
           document.getElementById('elMenu'+i).style.fontWeight='800'
           document.getElementById('elMenu'+i).style.borderLeft='4px solid #E70020'
           this.changeOther(index)
        }
      }
    },
    changeOther(index){
      var arrayOther=this.idparams
      var lengthOther=arrayOther.length
      for(var i=0;i<lengthOther;i++){
        if(arrayOther[i].index!=index){
          document.getElementById('elMenu'+i).style.backgroundColor='#FFF'
           document.getElementById('elMenu'+i).style.color='#303133'
           document.getElementById('elMenu'+i).style.fontWeight='100'
           document.getElementById('elMenu'+i).style.borderLeft='0px solid #E70020'
        }
      }
    }
  }
};
</script>
<style>
.anchor {
  margin-top: 15px;
  margin-left: 10px;
 
}
 .anchor li{
    line-height:40px;
    height:40px;
    text-align:left;
  }
   .anchor li:hover{
    color:#E70020;
    border-left:4px solid #E70020;
    font-weight: 800
  }
  .anchor li:nth-child(1){
     color:#E70020;
    border-left:4px solid #E70020;
    font-weight: 800
  }
</style>